<template>
     <div class="jx-bigs">    
         <div class="jx-info">
            <h3 class="fl">修改密码</h3>
        </div>
        <div class="forms">
            <el-form :model="form" :rules="rules" ref="form" >
                <el-form-item label="原密码" prop="oldpassWord" style="width:80%;">
                    <el-input type="password" v-model="form.oldpassWord"  auto-complete="new-oldpassWord" ></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="passWord" style="width:80%;">
                    <el-input type="password" v-model="form.passWord"  maxlength="14" auto-complete="new-password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码"  prop="checkPass" style="width:80%;">
                    <el-input type="password" v-model="form.checkPass"  maxlength="14" auto-complete="new-checkPass"></el-input>
                </el-form-item>
                 <div class="button-style savefn" @click="saveFn('form')" >保 存</div>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else {
                    if (this.form.checkPass !== '') {
                        this.$refs.form.validateField('checkPass')
                    }
                        callback()
                    }
            }
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== this.form.passWord) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
            }
            return {
                 form: {
                    oldpassWord: '',
                    passWord: '',
                    checkPass: ''
                },
                rules: {
                    oldpassWord: [
                        { required: true, message: '请输入原密码', trigger: 'blur' }
					],
                    passWord: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { required: true, validator: validatePass, trigger: 'blur' },
                        { min: 1, max: 14, message: '长度在 1 到 14 个字符', trigger: 'blur' }
					],
					checkPass: [
                        { required: true, message: '请确认密码', trigger: 'blur' },
                        { required: true, validator: validatePass2, trigger: 'blur' },
                        { min: 1, max: 14, message: '长度在 1 到 14 个字符', trigger: 'blur' }
                    ]
                },
            }
        },
        created () {
             console.log( this.$route.matched)
        },
        methods: {
            //保存
            saveFn(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.$http.put('/tes/user/password', {
                            oldPassword: this.form.oldpassWord,
                            newPassword: this.form.passWord
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                 this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                this.$alert('修改成功,点击确定跳转到登陆', '提示', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        this.$store.dispatch('FedLogOut').then(res => {
                                            location.reload()
                                        })
                                    }
                                });

                            }else{
                                this.$message.error(res.message)
                            }
                        })
                    }
                })

            }
        },
        
    }
</script>
<style scoped>
   .el-input>>>.el-input__inner{
        width: 280px;
        height: 38px;
        line-height: 38px;
    }
   .el-select>>>.el-input__inner{
       width: 280px;
        height: 38px;
        line-height: 38px;
   }
    .el-form-item{
        margin-bottom: 60px;
    }
    .el-form>>>.el-form-item__error{
        margin-top: 45px;
    }
</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
.jx-bigs {
    padding-left: 50px;
    padding-top: 20px;
    .jx-info{
        overflow: hidden;
        &>h3{
            height: 32px;
            line-height: 32px;
            font-size: $fs18
        }
    }
    .forms{
        margin: 28px 0;
        .savefn{
            margin:20px 30px 20px 0;
        }
        
    }
}
</style>